﻿
@{
    ViewBag.Title = "商品分类";
}
@section CSS{
    <link href="~/Content/plugins/layer/skin/layer.css" rel="stylesheet" />
    <link href="~/Content/plugins/zTree/v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            商品
            <small>分类</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">系统管理</a></li>
            <li class="active">商品分类</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="col-xs-12">
            <div class=" box wrapper-content animated fadeInRight">
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="float-e-margins">
                                <h5>商品分类列表</h5>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="ibox-content">
                            @*<div id="categoryTree" class="ztree"></div>*@
                            <ul id="categoryTree" class="ztree" style="overflow :auto;"></ul>
                        </div>
                    </div>
                    <div class="col-sm-9" style="padding-left: 0px;">
                        <div class="ibox-content">
                            <div style="margin-bottom:10px;">
                                <a onclick="admin_edit('添加顶级分类','/SystemSetting/addCategory/0',@ViewBag.tid,800,500)" href="javascript:void(0);" class="btn btn-primary ">添加顶级分类</a>
                                &nbsp; <a id="btnchilidren" onclick="add_chilidren_class()" href="javascript:void(0);" class="btn btn-primary ">添加当前下级分类</a>
                            </div>
                            <table class="table table-striped table-bordered table-hover " id="DataList">
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>分类名称</th>
                                        <th>图片</th>
                                        <th>排序</th>
                                        <th>状态</th>
                                        <th>编辑</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="parent_id" name="parent_id" value="0" />
        </div>
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@section JS{
    <script src="~/Content/plugins/layer/extend/layer.ext.js"></script>
    <script src="~/Content/plugins/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
    <script>

        $(function () {
            onLoadZTree();
            //$.fn.zTree.init($("#categoryTree"), setting);
            //初始化表格
            GenerateTable();
            //鼠标移动到该行变色
            $('.table-hover tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    console.log();
                }
                else {
                    u_table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
        });
        var tid =@ViewBag.tid;
        //生成表格
        function GenerateTable() {
            u_table = $('#DataList').dataTable({
                "lengthChange": true,
                "searching": false,
                "ordering": false,
                "iDisplayLength": 10,
                "bProcessing": true,
                "bServerSide": true,
                "fnServerParams": function (aoData) {
                    //var title = $("#title").val();
                    var pid = $("#parent_id").val();
                    var title ="";
                    aoData.push(
                        { "name": "title", "value": title },
                        { "name": "parentId", "value": pid },
                        { "name": "type", "value": tid }
                    );
                },
                "sAjaxSource": "/SystemSetting/CategoryList",
                "aoColumns": [
                    { "mDataProp": 'id' },
                    { "mDataProp": 'name' },
                    {
                        "mDataProp": 'icon', "mRender": function (data, type, full) {
                            return data==null||data==''?"":"<img style='max-height:35px;' src='"+domain+data+"' />"
                        }
                    },
                    { "mDataProp": 'sort' },
                    {
                        "mDataProp": 'status', "mRender": function (data, type, full) {
                            if (data == 1) {
                                return '<a class="btn btn-success" onClick="category_noPass(this,' + full.id + ')" href="javascript:;" title="点击禁用">启用</a>';
                            } else {
                                return '<a  class="btn btn-danger" onClick="category_pass(this,' + full.id + ')" href="javascript:;" title="点击启用">禁用</a>';
                            }
                        }
                    },
                    {
                        "mDataProp": 'id', "mRender": function (data, type, full) {
                            return ' <a href="javascript:void();" onclick ="admin_edit(\'编辑商品分类\',\'/SystemSetting/AddCategory\',' + full.id + ',800,500)" class="btn btn-default"  title="编辑商品分类" >编辑</a> ';
                        }
                    }
                ]
            });
        }

            /**
     * 加载树形结构数据
     */
    function onLoadZTree(){
      var treeNodes;
      $.ajax({
        async:false,//是否异步
        cache:false,//是否使用缓存
        type:'Post',//请求方式：post
        dataType:'json',//数据传输格式：json
        url:"/SystemSetting/GetCategoryTree/"+tid,//请求的action路径
        error:function(){
          //请求失败处理函数
          alert('亲，请求失败！');
        },
        success:function(data){
          //请求成功后处理函数
          treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
        }
      });
      var t = $("#categoryTree");
      t = $.fn.zTree.init(t, setting, treeNodes);
    }

        var zTree;
        var IDMark_Switch = "_switch";
        var IDMark_Icon = "_ico";
        var IDMark_Span = "_span";
        var IDMark_Input = "_input";
        var IDMark_Check = "_check";
        var IDMark_Edit = "_edit";
        var IDMark_Remove = "_remove";
        var IDMark_Ul = "_ul";
        var IDMark_A = "_a";
        var setting = {
          view: {
            dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
            showLine: true,//是否显示节点之间的连线
            fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
            selectedMulti: false, //设置是否允许同时选中多个节点
            addHoverDom: addHoverDom,//当用户鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同zTree内部的编辑，删除按钮
            removeHoverDom: removeHoverDom,//移出节点时,显示隐藏状态同zTree内部的编辑、删除按钮
            addDiyDom: addDiyDom
          },
          data: {
            simpleData: {//简单数据模式
              enable:true,
              idKey: "id",
              pIdKey: "pId",
              rootPId: ""
            }
          },
          callback: {
            beforeClick: function(treeId, treeNode) {
              zTree = $.fn.zTree.getZTreeObj("categoryTree");
              if (treeNode.isParent) {
                zTree.expandNode(treeNode);//如果是父节点，则展开该节点
              }else{
                zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
              }
            }
          },
          callback: { // 回调函数
             onClick: nodeClick,
             onExpand: nodeClick
          } 
        };

    /*增加*/
    function admin_add(title, url, w, h) {
        layer_show(title, url, "", w, h);
    };

    /*编辑*/
    function admin_edit(title, url, id, w, h) {
        layer_show(title, url, id, w, h);
    };

    //添加下级分类
    function add_chilidren_class() {
        var _value = $("#parent_id").val();
        if (_value == "0") { layer.msg("请在左侧选择上级"); return; }
        admin_edit('添加下级分类', '/SystemSetting/AddCategory/'+_value, tid, 800, 500);
    }

        /*启用*/
        function category_pass(obj, id) {
            layer.confirm('确定启用商品分类？', function (index) {
                $.ajax({
                    type: "post",
                    url: "/SystemSetting/SetCategoryIsUse",
                    dataType: "json",
                    data: { id: id, isUse: 1 },
                    success: function (data) {
                        if (data.status == "y") {
                            $(obj).text("启用").attr("onClick", "category_noPass(this," + id + ")").attr("title", "点击禁用").attr("class", "btn btn-success");
                            layer.msg('已启用', { icon: 6, time: 1000 });
                        }
                        else {
                            alert(data.info);
                        }
                    }
                });

            });
        }
        /*禁用*/
        function category_noPass(obj, id) {
            layer.confirm('确定禁用商品分类？', function (index) {
                $.ajax({
                    type: "post",
                    url: "/SystemSetting/SetCategoryIsUse",
                    dataType: "json",
                    data: { id: id, isUse: 2 },
                    success: function (data) {
                        if (data.status == "y") {
                            $(obj).text("禁用").attr("onClick", "category_pass(this," + id + ")").attr("title", "点击启用").attr("class", "btn btn-danger");
                            layer.msg('已禁用', { icon: 5, time: 1000 });
                        }
                        else {
                            alert(data.info);
                        }
                    }
                });

            });
        }

        //单击节点
        function nodeClick(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("categoryTree");
            var sNodes = treeObj.getSelectedNodes();
            if (sNodes.length > 0) {
                $("#parent_id").val(treeNode.id);
                u_table.fnDestroy();
                GenerateTable();
                if (treeNode.level == 10) {
                    $("#btnchilidren").hide();
                } else {
                    $("#btnchilidren").show();
                }
            }
        }

        function ajaxDataFilter(treeId, parentNode, responseData) {
            if (!responseData) return null;
            return responseData;
        }

        function addDiyDom(treeId, treeNode) {
            if (treeNode.parentNode && treeNode.parentNode.id != 2) return;
            var aObj = $("#" + treeNode.tId + IDMark_A);
            var editStr = "<a title='编辑' onclick='admin_edit(\"编辑商品分类\",\"/SystemSetting/AddCategory\"," + treeNode.id + ",800,500)' class=''>编辑</a>";
                    /*+ " | <a title='删除' onclick='del(" + treeNode.id + ")' class=''>删除</a>";*/
            aObj.after(editStr);
        }


        //鼠标在节点获取焦点显示添加按钮
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) {
                return;
            }
            //if (treeNode.editNameFlag || $("#delBtn_" + treeNode.tId).length > 0) {
            //    return;
            //}
            if (treeNode.editNameFlag || $("#updBtn_" + treeNode.tId).length > 0) {
                return;
            }
            ////删除
            //if (treeNode.isShowDeleteBut) {
            //    var delStr = "<span class='' id='delBtn_" + treeNode.tId
            //        + "' title='删除分类信息' style='color:red;' onclick='deleteNode(\"" + deleteOperate(treeNode.id) + "\",\"" + treeNode.name + "\")'>删除</span>";
            //    sObj.after(delStr);
            //}
            //修改
            if (treeNode.isShowUpdateBut) {
                var updStr = "<span class='' id='updBtn_" + treeNode.tId
                    + "' title='修改分类信息' style='color:red;' onclick='updateNode(\"" + deleteOperate(treeNode.id) + "\")'>修改</span>";
                sObj.after(updStr);
            }
            //添加
            if (treeNode.isShowInsertBut) {
                var addStr = "<span class='' id='addBtn_" + treeNode.tId
                    + "' title='添加分类信息'  style='color:red;' onclick='addNode(\"" + deleteOperate(treeNode.id) + "\",\"" + treeNode.name + "\")';>添加</span>";
                sObj.after(addStr);
            }
        };

        //隐藏按钮
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
            $("#updBtn_" + treeNode.tId).unbind().remove();
            $("#delBtn_" + treeNode.tId).unbind().remove();
        };

        //添加
        function addNode(id, name) {
            var url = getPath() + "/manager/buildinfo/toAddJsp?structureid=" + id;
            location.href = url;
        }
        //修改
        function updateNode(id) {
            var url = getPath() + "/manager/buildinfo/toUpdateJsp";
            location.href = url + "?id=" + id + "&isAdd=2";
        }
        ////删除
        //function deleteNode(id, name) {
        //    layer.confirm('您确定要删除 -->' + name + "吗?", function () {
        //        var url = getPath() + "/manager/buildinfo/deleteBuildInfo";
        //        var param = { "id": id, "time": Math.random() };
        //        $.post(url, param, function (data) {
        //            if ("error" == data) {
        //                layer.alert('对不起，你所删除的建筑信息,再被其他地方所使用,您不能删除!', 3);
        //                return false;
        //            } else if ("success" == data) {
        //                layer.msg('删除成功!', 2, -1);
        //                location.href = getPath() + "/manager/peizhiManager/buildinfo/buildinfoTree.jsp";
        //            } else if ("syncError" == data) {
        //                layer.msg('删除操作失败!', 2, -1);
        //            }
        //        });
        //    });
        //}
    </script>
}

